<template>
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 2px solid #cccccc; padding-bottom: 10px">
      <span style="font-size: 17px; color: #333333;">箱格列表</span>
      <i class="el-icon-back" @click="handleBack()" style="font-size: 18px; color: deepskyblue; cursor: pointer;">返回</i>
    </div>
    <div style="display: flex;width: 100%;">
<!--      <div style="width: 300px;height: 200px;background-color: #1890ff"/>-->
      <div style="padding-left: 75px">
        <table>
          <tr align="left" style="height:70px">
            <td style="width: 100px;">柜机ID</td>
            <td style="width: 300px;">
              {{ machine.id.toString().padStart(9, '0') }}
            </td>
            <td style="width: 100px;">所在地址</td>
            <td style="width: 370px;">
              {{ machine.location == null ? '' : machine.location.split('-').join('') }}{{ machine.address }}
            </td>
            <td style="width: 100px;">安装日期</td>
            <td style="width: 300px;">
              {{ machine.installDate === null ? '未安装' : formatOpenDate(machine.installDate) }}
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">柜机编码</td>
            <td style="width: 300px;">{{ machine.machineNumber }}</td>
            <td style="width: 100px;">箱格状况</td>
            <td style="width: 300px;">
              {{ machine.useCount == null ? '0' : machine.useCount}}/20
            </td>
            <td style="width: 100px;">开通时间</td>
            <td style="width: 300px;">
              {{ machine.openDate === null ? '' : formatOpenDateTime(machine.openDate) }}
              <button v-if="machine.openDate === null" style="margin-left: 10px" @click="machineStatus=4;handleOpen()">开通</button>
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">设备型号</td>
            <td style="width: 300px;">{{ machine.isModel }}</td>
            <td style="width: 100px;">状态</td>
            <td style="width: 300px;">
              {{ machine.machineStatus === 0 ? '正常' : machine.machineStatus === 1 ? '已禁用' : machine.machineStatus === 2 ? '已关机' : machine.machineStatus === 3 ? '重启中' : machine.machineStatus === 4 ? '未开通' : '未知'}}&nbsp;&nbsp;
              <el-button v-if="machine.machineStatus !== 1" @click="machineStatus=1;handleOpen()" type="danger">禁用</el-button>
              <el-button v-if="machine.machineStatus !== 3" @click="machineStatus=0;handleOpen()" type="primary">重启</el-button>
              <el-button v-if="machine.machineStatus !== 2" @click="machineStatus=2;handleOpen()" type="danger">关机</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div style="display: flex; align-items: center; margin-left: 10px; width: 1300px; height: 40px; margin-top:20px">
      <el-form :model="searchForm" ref="searchForm" class="demo-searchForm" style="display: flex; align-items: center;">
        <el-form-item prop="isType" style="margin-right: 10px;">
          <el-select v-model="searchForm.isType" @change="selectList()">
            <el-option label="全部类型" value=""></el-option>
            <el-option label="小箱" value="0"></el-option>
            <el-option label="中箱" value="1"></el-option>
            <el-option label="大箱" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="storageType" style="margin-right: 10px;">
          <el-select v-model="searchForm.storageType" @change="selectList()">
            <el-option label="存藏类型" value=""></el-option>
            <el-option label="冷藏" value="1"></el-option>
            <el-option label="常温" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isState" style="margin-right: 10px;">
          <el-select v-model="searchForm.isState" @change="selectList()">
            <el-option label="箱门状态" value=""></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isStatus" style="margin-right: 10px;">
          <el-select v-model="searchForm.isStatus" @change="selectList()">
            <el-option label="使用状态" value=""></el-option>
            <el-option label="空闲" value="0"></el-option>
            <el-option label="使用中" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%;" center
    >
      <el-table-column label="序号" prop="boxNumber" width="120">
        <template slot-scope="scope">
          <!-- 使用padStart方法来确保ID是9位的，如果不足则用0填充 -->
          <el-link :underline="false" @click="handleClick(scope.row.id)" style="color:blue">{{ scope.row.boxNumber}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="位置" prop="position" width="120"/>
      <el-table-column label="箱格类型" prop="isType" width="120">
        <template slot-scope="scope">
          {{ scope.row.isType === 0 ? '小箱' : scope.row.isType === 1 ? '中箱' : scope.row.isType === 2 ? '大箱' : '未知'}}
        </template>
      </el-table-column>
      <el-table-column label="宽高深/cm" width="120">
        <template slot-scope="scope">
          {{scope.row.width + 'x' + scope.row.height + 'x' + scope.row.depth}}
        </template>
      </el-table-column>
      <el-table-column label="存藏类型" prop="storageType" width="120">
        <template slot-scope="scope">
          {{ scope.row.storageType === 0 ? '常温' : scope.row.storageType === 1 ? '冷藏' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="温度/℃" width="120">
        <template slot-scope="scope">
          {{ scope.row.storageType===0 ? '常温' : scope.row.temperature }}
        </template>
      </el-table-column>
      <el-table-column label="箱门状态" prop="isState" width="120">
        <template slot-scope="scope">
          {{ scope.row.isState === 0 ? '正常' : scope.row.isState === 1 ? '异常' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="开箱次数" prop="openCount" width="200">
        <template slot-scope="scope">
          {{ scope.row.openCount == null ? '0' : scope.row.openCount}}
        </template>
      </el-table-column>
      <el-table-column label="最近开箱时间" prop="openDateTime" :formatter="formatDateTime"/>
      <el-table-column label="使用状态" prop="isStatus" width="120">
        <template slot-scope="scope">
          {{ scope.row.isStatus === 0 ? '空闲' : scope.row.isStatus === 1 ? '使用中' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button
              @click="setId(scope.row)"
              type="text"
              size="small">
            <i class="el-icon-edit" style="color: #409EFF;font-size: larger; font-weight: bold;"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改箱格" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="柜机ID" :label-width="formLabelWidth" align="left">
          {{ machine.id }}
        </el-form-item>
        <el-form-item label="所在地址" :label-width="formLabelWidth" align="left">
          {{ machine.location == null ? '' : machine.location.split('-').join('') }} {{ machine.address }}
        </el-form-item>
        <el-form-item label="箱格序号" :label-width="formLabelWidth" align="left">
          {{ boxNumber }}
        </el-form-item>
        <el-form-item label="箱格位置" :label-width="formLabelWidth">
          <el-row align="left">
            <el-col :span="5">
              <el-select v-model="position.row" placeholder="请选择行">
                <el-option label="1行" value="1行"></el-option>
                <el-option label="2行" value="2行"></el-option>
                <el-option label="3行" value="3行"></el-option>
                <el-option label="4行" value="4行"></el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-select v-model="position.column" placeholder="请选择列">
                <el-option label="1列" value="1列"></el-option>
                <el-option label="2列" value="2列"></el-option>
                <el-option label="3列" value="3列"></el-option>
                <el-option label="4列" value="4列"></el-option>
                <el-option label="5列" value="5列"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="宽高深/cm" :label-width="formLabelWidth">
          <el-row>
            <el-col :span="5">
              <el-input v-model="form.width" placeholder="请输入宽"/>
            </el-col>
            <el-col :span="5">
              <el-input v-model="form.height" placeholder="请输入高"/>
            </el-col>
            <el-col :span="5">
              <el-input v-model="form.depth" placeholder="请输入深"/>
            </el-col>

          </el-row>
        </el-form-item>
        <el-form-item label="箱格类型" :label-width="formLabelWidth" align="left">
          <el-select v-model="form.isType" placeholder="请选择">
            <el-option label="小箱" value="0"></el-option>
            <el-option label="中箱" value="1"></el-option>
            <el-option label="大箱" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="存藏类型" :label-width="formLabelWidth" align="left">
          <el-select v-model="form.storageType" placeholder="请选择">
            <el-option label="常温" value="0"></el-option>
            <el-option label="冷藏" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateBox()">确 定</el-button>
        <el-button @click="closeUpdate()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {findMachineById, getBoxList, updateStatus, updateBox} from "@/api/machine/VendingMachine";
import { getBoxList,findMachineById,updateStatus,updateBox } from "@/api/machine/machine";
export default {
  name: "BoxList",
  data() {
    return {
      id:this.$route.query.id,
      position:{
        row:'',
        column:''
      },
      machineStatus: '',
      machine: {
        id: ''
      },
      // id: '',
      boxId: '',
      boxNumber: '',
      searchForm: {
        machineId:'',
        isType: '',
        storageType: '',
        isState: '',
        isStatus: '',
      },
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '100px',
      form:{
        position:'',
        isType:'',
        storageType:'',
        weight:'',
        height:'',
        depth:'',
      },

    }
  },
  methods: {
    /*修改按钮点击事件*/
    setId(val){
      this.dialogFormVisible=true;
      this.boxNumber = val.boxNumber;
      this.boxId = val.id;
    },
    /*关闭修改弹窗*/
    closeUpdate(){
      this.position = {};
      this.form = {};
      this.dialogFormVisible=false;
    },
    /*修改箱格方法*/
    updateBox(){
      const data = {
        id: this.boxId,
        boxNumber: this.boxNumber,
        position: this.position.row + this.position.column,
        isType: this.form.isType,
        storageType: this.form.storageType,
        weight: this.form.weight,
        height: this.form.height,
        depth: this.form.depth,
      }
      updateBox(data).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.closeUpdate();
          this.selectList();
      })
    },
    /*规范时间格式*/
    formatDateTime(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    /*页面初始化*/
    init(){
      findMachineById(this.id).then(res => {
        this.machine = res.data;
        console.log(this.machine+1287654321234565432)
      })
    },
    /*修改状态*/
    handleOpen(){
      const data = {
        id: this.machine.id,
        machineStatus: this.machineStatus
      }
      updateStatus(data).then(res => {
        if (res.code === 200) {
          this.init();
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    /*搜索 表格展示*/
    selectList() {
      this.searchForm.machineId = this.id;
      console.log("打印出过来的id"+this.id)
      getBoxList(this.searchForm).then(response => {
        this.tableData = response.data;
      });
    },
    /*返回按钮*/
    handleBack(){
      this.$router.go(-1);
    },
    /*规范时间格式 年月日*/
    formatOpenDate(date) {
      if (!date) return '--'; // 如果日期为空，则返回 '--'

      // 将日期转换为 Date 对象（如果是字符串的话）
      const d = date instanceof Date ? date : new Date(date);

      // 获取年月日
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = d.getDate().toString().padStart(2, '0');

      // 返回格式化的日期字符串，例如 '2024-08-27'
      return `${year}-${month}-${day}`;
    },
    /*规范时间格式 年月日 时分秒*/
    formatOpenDateTime(date) {
      if (!date) return '--'; // 如果日期为空，则返回 '--'

      // 将日期转换为 Date 对象（如果是字符串的话）
      const d = date instanceof Date ? date : new Date(date);

      // 获取年月日时分秒
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hour = d.getHours().toString().padStart(2, '0');
      const minute = d.getMinutes().toString().padStart(2, '0');
      const second = d.getSeconds().toString().padStart(2, '0');

      // 返回格式化的日期时间字符串，例如 '2024-08-27 12:34:56'
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    handleClick(val){
      this.$router.push({
        path: '/boxDetail',
        query: {
          id: val
        }
      })
    }
  },
  created() {
  },
  mounted() {
    this.id = this.$route.query.id;
    this.init();
    this.selectList();
  }
}
</script>

<style scoped>
</style>

